@mixin basePaddingMargin($minVal, $maxVal) {
  @for $i from $minVal to $maxVal {
    .p-#{$i} {
      padding: #{$i}px !important;
    }
    .pl-#{$i} {
      padding-left: #{$i}px !important;
    }
    .pr-#{$i} {
      padding-right: #{$i}px !important;
    }
    .pb-#{$i} {
      padding-bottom: #{$i}px !important;
    }
    .pt-#{$i} {
      padding-top: #{$i}px !important;
    }
    .pv-#{$i} {
      padding-top: #{$i}px !important;
      padding-bottom: #{$i}px !important;
    }
    .ph-#{$i} {
      padding-left: #{$i}px !important;
      padding-right: #{$i}px !important;
    }

    .m-#{$i} {
      margin: #{$i}px !important;
    }
    .ml-#{$i} {
      margin-left: #{$i}px !important;
    }
    .mr-#{$i} {
      margin-right: #{$i}px !important;
    }
    .mb-#{$i} {
      margin-bottom: #{$i}px !important;
    }
    .mt-#{$i} {
      margin-top: #{$i}px !important;
    }
    .mv-#{$i} {
      margin-top: #{$i}px !important;
      margin-bottom: #{$i}px !important;
    }
    .mh-#{$i} {
      margin-left: #{$i}px !important;
      margin-right: #{$i}px !important;
    }
  }
}

@mixin baseFontSize($minVal, $maxVal) {
  @for $i from $minVal to $maxVal {
    .f-sz-#{$i} {
      font-size: #{$i}px !important;
    }
  }
}

@mixin baseWidth($minVal, $maxVal, $step) {
  @for $i from $minVal to $maxVal {
    .w-#{$i * $step} {
      width: #{$i * $step}px !important;
    }
  }
}

@mixin baseHeight($minVal, $maxVal, $step) {
  @for $i from $minVal to $maxVal {
    .h-#{$i * $step} {
      height: #{$i * $step}px !important;
    }
  }
}

@mixin baseLineHeight($minVal, $maxVal, $step) {
  @for $i from $minVal to $maxVal {
    .lh-#{$i * $step} {
      line-height: #{$i * $step}px !important;
    }
  }
}

@include basePaddingMargin(-100, 200);
@include baseFontSize(12, 40);
@include baseWidth(0, 1000, 1);
@include baseHeight(0, 1000, 1);
@include baseLineHeight(0, 80, 1);

// 过渡
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 过渡动画--从右震撼登场
.animation-shocking-from-the-right-enter-active {
  animation: animation-zoom-move-shocking-from-the-right 1s;
}
.animation-shocking-from-the-right-leave-active {
  animation: animation-zoom-move-shocking-from-the-right 1s reverse;
}
@keyframes animation-zoom-move-shocking-from-the-right {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-10px);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

// 过渡动画--从右进入
.animation-enter-from-the-right-enter-active {
  animation: animation-enter-from-the-right 1s;
}
.animation-enter-from-the-right-leave-active {
  animation: animation-enter-from-the-right 1s reverse;
}
@keyframes animation-enter-from-the-right {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) translateX(1000px);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.475) translateX(-10px);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

// 过渡动画--自由落体
.animation-bounce-fall-enter-active {
  animation: animation-bounce-fall 1s linear;
}
.animation-bounce-fall-leave-active {
  animation: animation-bounce-fall 1s linear reverse;
}
@keyframes animation-bounce-fall {
  0% {
    transform: translateY(-400px);
  }
  4% {
    transform: translateY(-395.16px);
  }
  8% {
    transform: translateY(-380.64px);
  }
  12% {
    transform: translateY(-356.44px);
  }
  16% {
    transform: translateY(-322.56px);
  }
  20% {
    transform: translateY(-279px);
  }
  24% {
    transform: translateY(-225.76px);
  }
  28% {
    transform: translateY(-162.84px);
  }
  32% {
    transform: translateY(-90.24px);
  }
  36% {
    transform: translateY(-7.96px);
  }
  40% {
    transform: translateY(-36px);
  }
  44% {
    transform: translateY(-66.36px);
  }
  48% {
    transform: translateY(-87.04px);
  }
  52% {
    transform: translateY(-98.04px);
  }
  56% {
    transform: translateY(-99.36px);
  }
  60% {
    transform: translateY(-91px);
  }
  64% {
    transform: translateY(-72.96px);
  }
  68% {
    transform: translateY(-45.24px);
  }
  72% {
    transform: translateY(-7.84px);
  }
  76% {
    transform: translateY(-14.76px);
  }
  80% {
    transform: translateY(-24px);
  }
  84% {
    transform: translateY(-23.56px);
  }
  88% {
    transform: translateY(-13.44px);
  }
  92% {
    transform: translateY(-2.64px);
  }
  96% {
    transform: translateY(-6.16px);
  }
  100% {
    transform: translateY(0);
  }
}

// 过渡动画--旋转缩放
.animation-rotate-zoom-enter-active {
  // 旋转放大
  animation: animation-rotate-zoom-large 1s;
}
.animation-rotate-zoom-leave-active {
  // 旋转缩小
  animation: animation-rotate-zoom-small 1s;
}
@keyframes animation-rotate-zoom-large {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg) scale(0);
  }
}
@keyframes animation-rotate-zoom-small {
  0% {
    opacity: 0;
    -webkit-transform: rotate(180deg) scale(2);
  }
}

// 过渡动画--缩放
.animation-zoom-enter-active {
  animation: animation-zoom-large 1s;
}
.animation-zoom-leave-active {
  animation: animation-zoom-small 1s;
}
@keyframes animation-zoom-large {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
}
@keyframes animation-zoom-small {
  0% {
    -webkit-transform: scale(1.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(0);
    opacity: 1;
  }
}
